<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件的嵌套</title>
  <script src="../js/vue.js"></script>
</head>
<body>
   <div id="root">

   </div>

   <script type='text/javascript'>

    // (1) 被嵌套的组件必须得写在 准备桥套的组件前面，声明在前面才可以去使用和变量一样
       const student= Vue.extend({
          template:`
             <div>
                姓名：{{name}}
                <br><br>
                年龄：{{age}}
             </div>
          `,
          data(){
             return {
                name:'周杰',
                age:'22'
             }
          }
       })

       const school = Vue.extend({

          /**
           *  (2) 组件的注册和使用必须要写在被装配的组件里的components
           *      不能相差两层，比如Vue实例只认school,不认student
           *      就是因为student没有写在Vue实例里面
           * */

          template:`
             <div>
                学校：{{name}}
                <br></br>
                地址：{{address}}
                <br></br>
                <student></student>
             </div>  
          `,
          data(){
             return {
                name:'尚硅谷',
                address:'北京昌平'
             }
          },
          components:{
             student
          }
       })

       const hello = Vue.extend({
          template:`
             <div>
             <h2>你们好啊~</h2>
             </div>
          `,
       })

       const app = Vue.extend({
        // (3) 注意 template不止一个标签的时候一定要用div把它包住
          template:`
             <div>
             <school></school>
             <hello></hello>
             </div>
          `,
          components:{
              school,
              hello
          }
  
       })
       new Vue({
        // (4) 只有一个组件/标签的时候可以不用写div
           template:`<app></app>`,
           el:'#root',
           components:{app}
       })
   </script>
</body>
</html>